<template>
<!-- 详情页头部 -->
	<div class="header-container">
		<router-link to="/" class="title"><span>手机商城</span></router-link> 
		<div>
          <el-dropdown v-if="username">
            <span class="el-dropdown-link">
              {{ username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link to="/zhongxin" class="link"><span>个人中心</span></router-link>
                </el-dropdown-item>
                <el-dropdown-item @click="logout">
                  退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span v-else>
            <router-link to="/login" class="link"><span>登录/注册</span></router-link>
          </span>
        </div>
	</div>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import useUserStore from '../store/module/user.js';

const router = useRouter();
const userStore = useUserStore();
const { username } = storeToRefs(userStore);

const logout = () => {
  userStore.clearUserInfo()
  router.replace('/login')
}

</script>

<style scoped lang="less">

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.link {
  text-decoration: none;
  margin-right: 10px;
}
.header-container {
  padding: 0 2rem;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #d0d0d0;

  .title {
    color: #808080;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
  }
}
</style>